<template>
    <div style="height: 100%">
        <navbar :title="$t('todo_tips_5')"></navbar>
        <div class="content-noBottom">
            <div style="height: calc(100% - 44px);margin-top:15px;" :class="{'height-100' : total === 0}">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getExamGradingList"
                    >
                        <div :class="{'height100' : total === 0}">
                            <ul class="module-list-box" v-if="total > 0">
                                <li class="white-bg" v-for="(aeItem, index) in list" :key="index">
                                    <div class="title-box">
                                        <p>{{$t("Paper_title")}}: <span>{{aeItem.resTitle}}</span></p>
                                        <p>{{$t("student_name")}}: <span>{{aeItem.name}}</span></p>
                                        <p>{{$t("mod_submit_time")}}: <span>{{aeItem.completeDatetime}}</span></p>
                                        <span class="btn-box btn-blue" @click="goGrading(aeItem)">{{$t("cos_detail_score")}}</span>
                                    </div>
                                </li>
                            </ul>
                            <!--暂无数据-->
                            <div v-if="!isLoading && total === 0" style="height:100%;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t("no_data") }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
        <!--查看 end-->
    </div>
</template>

<script>
export default {
    name: 'Approval',
    data() {
        return {
            sizeData: {
                pageNo: 1,
                pageSize: 15
            },
            list: [],
            total: 0,
            isApproval: false,
            isView: false,
            approvalTips: false, //审批后弹出层
            approvalTipsTitle: '', //审批后弹出层提示语
            aeItem: {},
            learnInfo: {},
            isLoading: true,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.sizeData.pageNo = 1;
                this.getExamGradingList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        getExamGradingList(option) {
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/scoring/list',
                params: {
                    sizeData: this.sizeData
                }
            }).then(res => {
                let _data = res.data;
                this.onFetching = false;
                this.isTop = true;
                this.isLoading = false;
                if (_data.results) {
                    if (option && option === 'refresh') {
                        this.list = _data.results;
                    } else {
                        this.list = [...this.list, ..._data.results];
                    }
                }
                this.total = _data.totalRecord;
                this.isLoading = false;
                this.sizeData.pageNo++;
                if (this.list.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        goGrading(item) {
            this.$router.push({path: `/examGrading/${item.resId}/${item.tkhId}/${item.attemptNbr}`});
        }
    },
    mounted() {
        this.getExamGradingList();
    }
};
</script>

<style scoped lang="less">
    .module-list-box > li {
        border-bottom: 1px solid #e6e6e6;
        padding: 0 15px;
        p{
            margin-bottom: 5px;
            span{
                margin-left: 5px;
            }
        }
        &:nth-last-child(1) {
            border-bottom: none;
        }
        & > .title-box {
            padding: 20px 0 25px;
        }
        .cont-box {
            padding-bottom: 20px;
            div {
                float: left;
                width: calc(100% - 123px);
                padding: 5px 0 0;
            }
            .btn-box {
                float: right;
                margin: 12px 0 0 0;
            }
        }
    }
    .user-pic-4 {
        float: left;
        margin-right: 10px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        img {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid #e6e6e6;
        }
    }
    .paddingLeft44 {
        padding-left: 22px;
    }
    .module-route-box {
        padding: 30px 0 40px;
    }
    .circle-pattern {
        margin-left: -22px;
        &:before {
            content: "";
            float: left;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #e5e5e5;
            margin: 2px 10px 0 0;
        }
        &.cur:before {
            content: "";
            background: #075ebb;
        }
    }
    .route-box {
        height: 70px;
        div {
            padding: 5px 0 10px;
        }
    }
    .route-pattern {
        margin-left: -22px;
        &:before{
            content: "";
            float: left;
            width: 12px;
            height: 100%;
            margin: 0 5px;
            border-left: 2px dashed #e5e5e5;
        }
        &.cur:before {
            border-left: 2px solid #075ebb;
        }
    }
</style>
